import React, { useState, useRef, useEffect } from 'react';  
  
interface ImageZoomProps {  
  src: string;  
  initialScale?: number;  
}  
  
const ImageZoom: React.FC<ImageZoomProps> = ({ src, initialScale = 1 }) => {  
  const [scale, setScale] = useState(initialScale);  
  const [isZooming, setIsZooming] = useState(false);  
  const imgRef = useRef<HTMLImageElement>(null);  
  const startX = useRef(0);  
  const startY = useRef(0);  
  const startScale = useRef(scale);  
  
  const handleMouseDown = (e: React.MouseEvent<HTMLImageElement>) => {  
    if (e.button !== 0) return; // 只处理左键点击  
    startX.current = e.clientX;  
    startY.current = e.clientY;  
    startScale.current = scale;  
    setIsZooming(true);  
    document.addEventListener('mousemove', handleMouseMove);  
    document.addEventListener('mouseup', handleMouseUp);  
    document.addEventListener('mouseleave', handleMouseUp);  
  };  
  
  const handleMouseMove = (e: MouseEvent) => {  
    if (!isZooming) return;  
    const dx = e.clientX - startX.current;  
    const dy = e.clientY - startY.current;  
    const dist = Math.sqrt(dx * dx + dy * dy);  
    const newScale = startScale.current + 0.01 * (dist - 100); // 假设移动100px无变化，之后根据距离缩放  
    setScale(newScale > 0.1 ? newScale : 0.1); // 设置最小缩放比例  
  };  
  
  const handleMouseUp = () => {  
    setIsZooming(false);  
    document.removeEventListener('mousemove', handleMouseMove);  
    document.removeEventListener('mouseup', handleMouseUp);  
    document.removeEventListener('mouseleave', handleMouseUp);  
  };  
  
  return (  
    <img  
      src={src}  
      ref={imgRef}  
      style={{  
        cursor: 'zoom-in',  
        transform: `scale(${scale})`,  
        transition: 'transform 0.1s ease',  
        // 其他样式...  
      }}  
      onMouseDown={handleMouseDown}  
    ></img>  
  );  
};  
  
export default ImageZoom;
